<template>
  <!-- 充值-->
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="60%"
    append-to-body
    @close="reset"
  >
    <el-form v-show="title==='新增'" ref="dataForm" class="form" label-position="left" label-width="80px">
      <el-form-item label-width="0" class="block">
        <el-input v-model.trim="search.param" style="width: 300px;" placeholder="请输入">
          <el-select slot="prepend" v-model="qtype" style="width: 100px;" placeholder="请选择">
            <el-option label="用气证" value="csmCode" />
            <el-option label="电话" value="csmRgPhone" />
            <el-option label="身份证" value="sfzh" />
          </el-select>
        </el-input>
        <el-button style="margin-left: 10px;" type="primary" @click="searchTxt">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="item">
      <el-descriptions size="medium">
        <el-descriptions-item label="用气证">{{ csmInfo.csmCode }}</el-descriptions-item>
        <el-descriptions-item label="用户名">
          <template slot="label">
            <i class="el-icon-user" />
            用户名
          </template>{{ csmInfo.csmName }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ csmInfo.sfzh }}</el-descriptions-item>
      </el-descriptions>
      <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="90px">
        <el-form-item label="费用类型:" style="width: 33%;" prop="feeType" label-width="130px">
          <el-select v-model="temp.feeType" placeholder="请选择" :disabled="title === '详情'">
            <el-option
              v-for="item in feeTypeMap"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数量:" style="width: 33%;" prop="feeCount">
          <el-input v-model.number="temp.feeCount" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" :disabled="title === '详情'" />
        </el-form-item>
        <el-form-item label="金额:" style="width: 33%;" prop="fee">
          <el-input v-model.number="temp.fee" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" :disabled="title === '详情'" />
        </el-form-item>
        <el-form-item label="备注:" style="width: 100%;" label-width="90px">
          <el-input v-model="temp.remark" type="textarea" resize="none" :maxlength="250" placeholder="请输入" :disabled="title === '详情'" />
        </el-form-item>
      </el-form>
    </div>
    <div v-show="title !== '详情'" slot="footer" class="dialog-footer">
      <el-button @click="reset">关闭</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {
    queryCsmInfo,
    saveFee,
    topUpAdministrationPrice
  } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'
  export default {
    name: '',
    components: {
    },
    props: {
      feeTypeMap: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        formatColumnMap,
        title: '新增',
        userInfo: {},
        qtype: 'csmCode',
        search: {
          param: ''
        },
        customerTypeMap: [],
        selectioned: null,
        decimalSpare2: null,
        decimalSpare3: null,

        csmcardMax: 0,
        parseTime,
        visible: false,
        type: null,
        cardCode: '',
        csmInfo: {},

        temp: {
          feeType: null,
          feeCount: null,
          fee: null,
          remark: ''
        },
        rules: {
          feeType: [
            { required: true, message: '请选择费用类型', trigger: 'change' }
          ],
          feeCount: [
            { required: true, message: '请输入数量', trigger: 'change' }
          ],
          fee: [
            { required: true, message: '请输入金额', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
    },
    watch: {
    },
    methods: {
      async searchTxt() {
        //
        if (this.qtype === 'csmCode') {
          if (!this.search.param) {
            this.$message({
              type: 'warning',
              message: '请输入用气证'
            })
            return
          }
          this.getUserInfo()
        //
        } else if (this.qtype === 'csmRgPhone') {
          if (!this.search.param) {
            this.$message({
              type: 'warning',
              message: '请输入客户电话'
            })
            return
          }
          this.getUserInfo()
        } else {
          if (!this.search.param) {
            this.$message({
              type: 'warning',
              message: '请输入身份证号'
            })
            return
          }
          this.getUserInfo()
        }
      },
      // 请求用户信息接口
      async getUserInfo() {
        const params = {
          [this.qtype]: this.search.param
        }
        const res = await queryCsmInfo(params)
        console.log('用户信息', res)
        if (res.data) {
          this.csmInfo = res.data
        }
      },
      async open(data, type) {
        console.log(data)
        if (data && type) {
          this.title = '详情'
          this.temp.billCode = data.billCode
          this.csmInfo.csmId = data.csmId
          this.csmInfo.csmCode = data.csmCode
          this.csmInfo.csmName = data.csmName
          this.csmInfo.sfzh = data.sfzh
          this.temp.feeType = data.feeType
          this.temp.feeCount = data.feeCount
          this.temp.fee = data.fee
          this.temp.remark = data.remark
        } else if (data) {
          this.title = '编辑'
          this.temp.billCode = data.billCode
          this.csmInfo.csmId = data.csmId
          this.csmInfo.csmCode = data.csmCode
          this.csmInfo.csmName = data.csmName
          this.csmInfo.sfzh = data.sfzh
          this.temp.feeType = data.feeType
          this.temp.feeCount = data.feeCount
          this.temp.fee = data.fee
          this.temp.remark = data.remark
        } else {
          this.title = '新增'
        }
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 提交
      async onSubmit() {
        if (!this.csmInfo.csmId) {
          this.$message.error('请查询客户信息')
          return
        }
        if (this.temp.feeType === 2 && this.temp.fee > this.csmInfo.strSpare1) {
          this.$message.error('当前登记金额超出用户已有使用权费')
          return
        }
        if (this.temp.feeType === 2 && (this.csmInfo.strSpare1 === undefined || this.csmInfo.strSpare1 === '')) {
          this.$message.error('暂无可退使用权费')
          return
        }
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const json = {
            csmId: this.csmInfo.csmId,
            csmCode: this.csmInfo.csmCode,
            csmName: this.csmInfo.csmName,
            sfzh: this.csmInfo.sfzh,
            billCode: this.temp.billCode || null,
            feeType: this.temp.feeType,
            feeCount: this.temp.feeCount,
            fee: this.temp.fee,
            remark: this.temp.remark
          }
          saveFee({ json }).then(res => {
            this.$notify({
              title: '提示',
              message: `保存成功`,
              type: 'success',
              duration: 2000
            })
            this.$emit('updateDate')
            this.visible = false
          }).catch(() => {
            this.visible = false
          })
        })
      },
      reset() {
        this.csmInfo = {}
        this.search = {
          param: ''
        }
        this.qtype = 'csmCode'
        this.$nextTick(() => {
          this.visible = false
        })
        this.temp = {
          feeType: null,
          feeCount: null,
          fee: null,
          remark: ''
        }
        this.$refs.dataForm.clearValidate()
      },
      async formatInput(e) {
        if (this.type === 5) {
          this.temp.money = (e.target.value * 1).toFixed(2)
          return
        }
        if (e.target.value) {
          this.temp.feeCount1 = (e.target.value * 1).toFixed(2)
          const res = await topUpAdministrationPrice({ feeCount1: this.temp.feeCount1 * 100 })
          var result = res.data // 赠送金额
          if (result !== 0) {
            result = result * 1.00 / 100
            result = isNaN(result) ? '0.00' : result.toFixed(2)
          }
          // 赠送金额
          this.temp.feeCount2 = result === 0 ? 0.00 : result
          // 设置卡内余额
          this.temp.cardStatus = this.temp.feeCount1
          // 设置应收金额
          this.temp.totalPrice = (this.temp.feeCount1 * 1) + (result * 1) + (this.temp.cardFee * 1)
        }
      },
      // 充值金额
      onInput(value, is) {
        const res = value
          .replace(/[^\d.]/g, '')
          .replace(/\.{2,}/g, '.')
          .replace(/^\./g, '')
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^0\d+|^\./g, '')
          .replace(/^(.*\..{2}).*$/, '$1')
        this.temp.feeCount1 = res
        this.temp.money = res
      },
      // 充值金额
      numberFormat1: function(val) {
        val = val * 1.00 / 100
        val = Number(val)
        val = isNaN(val) ? '0.00' : val.toFixed(2)
        return val
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
  .form {
    display: flex;
    flex-wrap: wrap;
    & /deep/ .el-form-item {
      display: flex;
      width: 50%;
      padding-right: 10px;
      .el-form-item__content {
        width: 100%;
      }
    }

    /deep/.el-form-item__content {
      margin-left: 10px !important;
    }
    span {
      margin-left: 6px;
      span {
        font-size: 14px;
        color: red;
      }
    }
  }
}
.remark-changecard {
  /deep/.el-form-item__content {
    width: 80%;
  }
}
.change-cardfee {
  width: 50% !important;
}
.table-list {
  width: 100%;
  height: 250px;
  /deep/ .el-table {
    height: 200px !important;
    overflow: auto;
    .el-table__body-wrapper {
      height: auto !important;
    }
  }
  /deep/ .has-gutter {
    .el-checkbox {
      display: none;
    }
  }
}
</style>

